<template>
  <div class="citys">
    <el-form class="demo-form-inline" :model="cForm" :inline="true">
      <el-form-item label="省份">
        <el-select
          placeholder="请选择"
          v-model="cForm.category1Id"
          @change="handler1"
        >
          <el-option
            v-for="(c1, index) in province"
            :label="c1.name"
            :value="c1.pid"
            :key="c1.pid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地市">
        <el-select
          placeholder="请选择"
          v-model="cForm.category2Id"
          @change="handler2"
          :disabled="isShow"
        >
          <el-option
            :label="c2.name"
            :value="c2.cid"
            v-for="(c2, index) in city"
            :key="c2.cid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县">
        <el-select
          placeholder="请选择"
          v-model="cForm.category3Id"
          @change="handler3"
          :disabled="isShow1"
        >
          <el-option
            :label="c3.name"
            :value="c3.aid"
            v-for="(c3, index) in county"
            :key="c3.aid"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      province: [],
      city: [],
      county: [],
      cForm: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
      isShow: true,
      isShow1: true,
    };
  },
  mounted() {
    axios.get("code.json").then(({ data }) => {
      this.province = data;
    });
  },
  methods: {
    handler1(e) {
      this.city = [];
      this.county = [];
      this.cForm.category2Id = "";
      this.cForm.category3Id = "";
      this.city = this.province.filter((r) => r.pid == e)[0].children;

      this.isShow = false;
    },
    handler2(e) {
      this.county = [];
      this.cForm.category3Id = "";
      this.county = this.city.filter((r) => r.cid == e)[0].children;

      this.isShow1 = false;
    },
    handler3(e) {
      // 发送请求
    },
  },
};
</script>

<style lang="scss" scoped>
.citys {
  box-sizing: border-box;
}
</style>
